<template>
	<view>
		<view >
			<!-- #ifdef APP || H5-->
				<!-- 动态显示对应组件 -->
				 <component :is="currentComponent" v-if="isMounted" />
			<!-- #endif -->
		   
		  
		</view>
		<view>
			<u-tabbar
			     :value="value"
			     @change="handleTabChange"
			     :fixed="true"
			     :placeholder="true"
			     :safeAreaInsetBottom="true"
			 >
			     <u-tabbar-item text="博客" icon="file-text"></u-tabbar-item>
			     <u-tabbar-item text="项目" icon="list-dot"></u-tabbar-item>
			     <u-tabbar-item text="大事记" icon="info-circle"></u-tabbar-item>
			     <u-tabbar-item text="我的" icon="account"></u-tabbar-item>
			 </u-tabbar>
		</view>
	</view>
   
	
</template>

<script>
// 假设你已经引入了这些组件
import Blog from '@/pages/blog/blog.vue';
import Project from '@/pages/projects/projects.vue';
import Milestone from '@/pages/milestone/milestone.vue';
import My from '@/pages/my/my.vue'

export default {
	
	components: {
	        Blog,
	        Project,
	        Milestone,
			My
	    },
    data() {
        return {
            value: '',
            // 当前要显示的组件
            currentComponent: null,
			isMounted: false
        };
    },
    methods: {
        handleTabChange(ind) {
            this.value = ind;
            console.log(ind);
            switch (ind) {
                case 0:
                    console.log('去往博客');
					try{
						 this.currentComponent = Blog;
					}catch(e){
						console.log(e)
					}
                   
					 
                    break;
                case 1:
                    console.log('去往项目');
                    this.currentComponent = Project;
                    break;
                case 2:
                    console.log('去往大事记');
                    this.currentComponent = Milestone;
                    break;
               case 3:
                   console.log('去往我的');
                   this.currentComponent = My;
                   break;
                default:
				console.log( this.currentComponent);
                    break;
				 // 确保视图更新
				            this.$forceUpdate();
            }
        }
    },
    mounted() {
		this.isMounted = true;
		this.currentComponent=Blog
        // 初始化显示第一个组件
        this.handleTabChange(0);
    }
};
</script>

<style>

</style>    